<template>
  <div   class="card-list">

    <formHeader :title="'换购卡券'" :newColor="true"></formHeader>

    <div class="head">
      <div class="item" :class="{sel:type==0}" @click="type=0">可已用</div>
      <div class="item" :class="{sel:type==1}" @click="type=1">未到账</div>
      <div class="item" :class="{sel:type==2}" @click="type=2">不可用</div>
    </div>

    <div class="list" >
      <cube-scroll>
        <div class="card" @click="click(card)" v-for="(card,index) in cards" :key="index">
          <div class="left">
            <div class="info">{{card.info}}</div>
            <div class="time">有效期至 {{card.expireTime}}</div>
          </div>
          <div class="right">
            <div class="price"><span>￥</span>{{card.mount}}</div>
            <div class="desc">换购券</div>
            <div class="status">
              {{status[card.status]}}
            </div>
          </div>
        </div>
      </cube-scroll>
    </div>

<!--    <div class="total" style="margin-top: 10px">{{total}}</div>-->
<!--    <div class="confirm" >-->
<!--      确认-->
<!--    </div>-->


  </div>
</template>

<script>
import {info} from "@/api/user";
import formHeader from '@/components/form-header'
export default {
  components:{
    formHeader
  },
  created() {
    info().then(res=>{
      this.list = res.extra.allCoupons
    })
  },
  data(){
    return {
      status:['未使用','已使用'],
      list:[],
      type:0
    }
  },
  methods:{

  },
  computed:{
      cards(){
        return this.list.filter(l=>{
          if(this.type == 0){
            return l.act
          }
          if(this.type==1){
            return l.not
          }
          if(this.type==2){
            return l.used
          }
        })
      }
  },
}
</script>

<style scoped lang="stylus">
.card-list
  background-color white
  z-index 1000
  position fixed
  top 0
  right 0
  left 0
  bottom -60px
  display flex
  align-items center
  flex-direction column
  padding 20px 20px
  padding-top 50px
  .head
    display flex
    align-items center
    margin 10px 0
    .item
      margin-right 20px
      height 30px
      padding 0 10px
      display flex
      align-items center
      justify-content center
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #656668;
      background-color #F9FAFC
      border-radius 5px
      &.sel
        color #000000
        background-color #FFF2F1
        font-size 12px
  .list
    width 100%
    height 100%
    padding-bottom 40px
    overflow hidden
  .card
    background-color #F6DBDB
    width 100%
    height 110px
    display flex
    align-items center
    border-radius 10px
    margin-bottom 10px
    .left
      padding-left 15px
      display flex
      flex-direction column
      flex 1
      .info
        margin-bottom 10px
        font-weight: bold;
        font-size 14px
        color: #333333;
        line-height: 18px;
        min-height 31px
      .time
        font-weight: 500;
        color: #999999;
        line-height: 18px;
        font-size 11px
    .right
      width 80px
      border-left 1px dotted #FDA59E
      display flex
      flex-direction column
      align-items center
      .status
        font-size 16px
        color #00D6C0
      .price
        font-weight: bold;
        color: #FE4B38;
        line-height: 18px;
        font-size 28px
        margin-bottom 8px
        span
          font-size 14px
      .desc
        font-size 11px
        color #999999
        margin-bottom 18px
      .sel
        width 16px
        height 16px
        img
          height 100%
          width 100%




  .confirm
    position fixed
    bottom 20px
    height 40px
    width 200px
    font-size 18px
    color white
    display flex
    align-items center
    justify-content center
    background-color red
    border-radius 50%px
</style>